<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 添加响应式视口标签 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Coder-nav-登录</title>
    <script src="/js/jquery/jquery.js"></script>
    <script src="/js/vue/vue.js"></script>
    <script src="/js/vue/axios.js"></script>
    <script src="/js/vue/element-ui.js"></script>
    <script src="/js/util.js"></script>
    <link rel="stylesheet" href="/css/background.css">
    <style>
        @import url("/css/vue/element-ui.css");
        #form {
            position: absolute;
            border-radius: 10px;
            left: 50%;
            top: 40%;
            width: 460px;
            height: 280px;
            transform: translate(-50%, -50%);
        }
        p {
            color: lightgrey;
        }
        #main {
            position: absolute;
            left: 50%;
            top: 50%;
            text-align: center;
            transform: translate(-50%, -50%);
        }
        h3 {
            color: #409EFF;
        }
        .input {
            opacity: 0.8;
            width: 85%; /* 输入框宽度 */
            margin: 0 auto; /* 居中 */
        }
        button {
            width: 85%;
        }
    </style>
</head>
<body>
<div id="app">
    <el-form ref="form" id="form" :model="form">
        <div id="main">
            <div>
                <h3>Coder-nav</h3>
                <div id="login">
                    <el-input class="input" v-model="form.username" placeholder="账号"></el-input>
                    <br/><br/>
                    <el-input class="input" v-model="form.password" show-password placeholder="密码"></el-input>
                    <br/><br/>
                    <el-button type="primary" @click="login" plain>点击登录</el-button>
                </div>
                <div id="list" style="display: none">
                    <img src="/img/loading.gif" width="50%"/><br/><br/>
                </div>
            </div>
        </div>
    </el-form>
</div>
<script>
    var Main = {
        data() {
            return {
                form: {
                    username: '',
                    password: ''
                }
            }
        },
        mounted:function() {
            this.checkToken()
        },
        methods: {
            login() {
                var main = document.getElementById("main");
                var username = this.$data.form.username;
                var password = this.$data.form.password;
                main.style.display = 'none';
                this.$loading()
                axios.post('/login', {
                    username: username,
                    password: password,
                    token: localStorage.getItem('token'),
                }).then((response) => {
                    localStorage.setItem('token', response.data.data.token)
                    this.checkToken()
                }).catch((response) => {
                    this.$loading().close()
                    main.style.display = 'block';
                    this.$message.error("账号或密码错误")
                })
            },
            checkToken() {
                axios.get('/login/checkToken', {
                    params: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    if(response.data.data) {
                        main.style.display = 'none';
                        this.$loading();
                        var jump = localStorage.getItem('jump');
                        if(jump && jump === window.location.href) {
                            jump = null;
                            localStorage.setItem('jump', null);
                        }
                        if(jump) {
                            this.jump(jump)
                        } else {
                            if(isMobile()) {
                                this.jump('cash')
                            } else {
                                this.jump('memo')
                            }
                        }
                    }
                });
            },
            clearToken() {
                axios.get('/logout', {
                    params: {
                        token: localStorage.getItem('token')
                    }
                }).then((response) => {
                    localStorage.setItem('token', '')
                    this.checkToken()
                    this.$message.info("退出登录成功")
                })
            },
            jump(url) {
                window.location.href = url
            },
        }
    };
    var Ctor = Vue.extend(Main);
    new Ctor().$mount('#app')
</script>
</body>
</html>